/*
 * @Author: xiaosihan 
 * @Date: 2023-12-16 18:17:15 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-25 04:13:37
 */


import ToolClothColor from "@/editorComponent/RightMenu/ToolClothColor/ToolClothColor";
import editorStore from "@/editorComponent/editorStore";
import { Modal } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import Preview2D from "../Preview2D/Preview2D";
import styles from "./previewModal.module.less";
import previewModal3DRenderer from "./previewModal3DRenderer";
import previewModalStore from "./previewModalStore";
import ToolThreadColor from "../../ToolThreadColor/ToolThreadColor";

interface Iprops {
  children?: ReactNode
}

// 预览弹窗
export default function PreviewModal(props: Iprops) {

  const [open, setOpen] = useState(previewModalStore.open);
  const [view, setView] = useState("3D");
  const [fillType, setFillType] = useState(0);
  const [hasMockup, setHasMockup] = useState(false);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    setOpen(previewModalStore.open);
    const { goodsData } = editorStore;
    if (goodsData) {
      const hasMockup = goodsData.mockupUrls.length > 0;
      setHasMockup(hasMockup);
      setFillType(goodsData.fillType);
      // 满版印刷模型展示3d, 局部硬刷默认展示2d
      setView(goodsData.fillType === 0 ? "3D" : "2D");
    } else {
      setHasMockup(false);
    }
  }), []);

  return (
    <Modal
      title="设计预览"
      open={open}
      centered={true}
      width={800}
      footer={false}
      maskClosable={false}
      destroyOnClose={true}
      onCancel={() => previewModalStore.setOpen(false)}
    >
      <div className={styles.previewModal} >
        <span className={styles.switch} >
          {
            (fillType === 0) &&
            <span
              className={clsx(styles.switch_item, view === "3D" && styles.active)}
              onClick={() => setView("3D")}
            >3D</span>
          }
          {
            hasMockup &&
            <span
              className={clsx(styles.switch_item, view === "2D" && styles.active)}
              onClick={() => setView("2D")}
            >2D</span>
          }
        </span>
        {
          view === "3D" &&
          <div
            ref={dom => previewModal3DRenderer.setContainer(dom)}
            className={styles.previewModal3d}
          ></div>
        }
        {
          view === "2D" &&
          <div
            className={styles.previewModal2d}
          >
            <Preview2D
              showList={true}
              show={view === "2D"}
            />
          </div>
        }

        <div className={styles.colorTool}>
          {/* 衣服的颜色 */}
          <ToolClothColor />
          {/* 缝线颜色组件 */}
          <ToolThreadColor />
        </div>

      </div>
    </Modal>
  );

}